<template>
    <div class="ml-16px mr-16px content-container">
        <div class="flex items-center pt-26px pl-26px pr-26px">
            <el-input v-model="formData.title" placeholder="请输入关键词" class="w-300px mr-12px"></el-input>
            <div class="w-350px mr-12px">
                <el-date-picker
                    v-model="formData.date"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                />
            </div>
            <el-button type="primary" :icon="Search" v-debounce="{ callback: handleSearch, delay: 300 }">搜索</el-button>
        </div>
        <div class="pt-26px pl-26px pr-26px table-container">
            <el-table :data="state.keywords" :default-sort="{ prop: 'total', order: 'descending' }" class="w-full">
                <el-table-column prop="sort" label="序号" align="center" width="60" />
                <el-table-column prop="name" label="达标关键词" align="center" />
                <el-table-column prop="ranking" label="排名" align="center" width="200" />
                <el-table-column prop="state" label="状态" align="center" width="200">
                    <template #default="scope">
                        <div v-if="scope.row.state == 0"><el-tag type="success"><!--9:16-->发布完毕</el-tag></div>
                        <div v-else-if="scope.row.state == 1"><el-tag>未发布</el-tag></div>
                    </template>
                </el-table-column>
                <el-table-column prop="date" label="添加时间" align="center" width="200">

                </el-table-column>
                <el-table-column label="操作" align="center" width="180">
                    <template #default="scope">
                        <el-button type="primary">查看排名</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="pt-26px pl-26px pr-26px pb-26px page-container flex flex-center">
            <el-pagination
                size="small"
                background
                layout="prev, pager, next"
                :total="50"
            />
        </div>
    </div>
</template>

<script setup lang="ts">
import { Search } from '@element-plus/icons-vue'

const formData = reactive({
    title: '',
    date:''
})

const state = reactive({
    keywords: [
        {
            id:1,
            sort: 1,
            name: '任务名称1',
            ranking: 1,
            state:0,
            date: '2022-01-01'
        }
    ]
})

function handleSearch() {
    console.log('handleSearch', formData)
}
</script>

<style scoped>

</style>